<template>
  <a-modal
    :title="currTitle"
    :visible="visible"
    :closable="false"
    centered
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="确定"
    cancelText="取消"
    width="900px"
  >
    <div style="width:100%;height:620px;margin-top:-10px;">
      <transfer-check
        v-if="visible"
        ref="transferSelect"
        :url="url"
        :tab-columns="tabColumns"
        :origin-target-keys="originTargetKeys"
        :key-name="keyName"
      />
    </div>
  </a-modal>
</template>
<script>
export default {
  components: {
    TransferCheck: () => import('@/components/tools/TransferCheck')
  },
  name: 'UserSelect',
  props: {
    title: {
      type: String,
      default: '选择人员',
      required: false
    }
  },
  data() {
    return {
      visible: false,
      currTitle: this.title,
      confirmLoading: false,
      keyName: 'username',
      url: '/masterdata/selUserList',
      tabColumns: [
        {
          dataIndex: 'username',
          title: '账号'
        },
        {
          dataIndex: 'realname',
          title: '姓名'
        }
      ],
      originTargetKeys: [] ,
      field:''
    };
  },
  mounted() {},
  methods: {
    doSelect(col) {
      if (col != undefined){
        this.field = col.field;
      }
      this.visible = true;
    },
    handleOk() {
      var result = this.$refs.transferSelect.targetRows;
      this.$refs.transferSelect.clearTargetKey();
      this.$emit('setResult', result , this.field);
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep  .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
::v-deep  .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
::v-deep  .ant-modal-content {
  border-radius: 15px;
}
::v-deep  .ant-modal-title,
::v-deep  .ant-modal-footer {
  text-align: center;
}
::v-deep  .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
::v-deep  .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%,#1158c9 100%);
}
::v-deep  .ant-modal-title {
  color: #fff;
}

::v-deep  .anticon {
  color: #1890ff !important;
}
</style>
